<template>
  <a class="content">
    <div class="img">
      <div class="bac"
        :style="{ backgroundImage: `linear-gradient(#f0f0f0, #f0f0f0), linear-gradient(transparent, transparent), url(${item.icon})` }">
      </div>
      <img loading="lazy" class="icon" :src="item.icon" :alt="item.name + ' icon'" />
    </div>
    <div class="info">
      <a class="name">
        {{ item.name }}
      </a>
      <div class="dec">
        <svg style="margin-top: -0.5%;" xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11"
          fill="none">
          <g clip-path="url(#clip0_10262_280)">
            <path
              d="M4.80208 1.45625C4.82034 1.41936 4.84855 1.3883 4.88352 1.36659C4.91849 1.34488 4.95883 1.33337 5 1.33337C5.04116 1.33337 5.0815 1.34488 5.11648 1.36659C5.15145 1.3883 5.17965 1.41936 5.19791 1.45625L6.16041 3.40583C6.22382 3.53415 6.31742 3.64517 6.43317 3.72935C6.54893 3.81354 6.68338 3.86838 6.825 3.88916L8.9775 4.20416C9.01828 4.21007 9.0566 4.22728 9.08812 4.25383C9.11964 4.28038 9.14309 4.31522 9.15584 4.35442C9.16858 4.39361 9.17011 4.43558 9.16024 4.47559C9.15037 4.51561 9.12951 4.55206 9.1 4.58083L7.54333 6.09666C7.44067 6.19671 7.36386 6.3202 7.31951 6.45651C7.27516 6.59282 7.26461 6.73787 7.28875 6.87916L7.65625 9.02083C7.66345 9.0616 7.65904 9.10356 7.64354 9.14195C7.62803 9.18033 7.60205 9.21358 7.56856 9.23791C7.53506 9.26224 7.49541 9.27666 7.45411 9.27954C7.41281 9.28241 7.37154 9.27362 7.335 9.25416L5.41083 8.2425C5.28405 8.17592 5.14299 8.14114 4.99979 8.14114C4.85659 8.14114 4.71553 8.17592 4.58875 8.2425L2.665 9.25416C2.62847 9.2735 2.58725 9.2822 2.54602 9.27927C2.50479 9.27634 2.46521 9.2619 2.43179 9.23759C2.39836 9.21328 2.37243 9.18007 2.35694 9.14176C2.34145 9.10344 2.33702 9.06154 2.34416 9.02083L2.71125 6.87958C2.7355 6.73822 2.72499 6.59308 2.68064 6.45668C2.63629 6.32029 2.55942 6.19673 2.45666 6.09666L0.899997 4.58125C0.870245 4.55251 0.849161 4.51599 0.839148 4.47586C0.829135 4.43573 0.830596 4.39359 0.843363 4.35424C0.856131 4.3149 0.879692 4.27993 0.911362 4.25332C0.943033 4.22672 0.98154 4.20954 1.0225 4.20375L3.17458 3.88916C3.31635 3.86854 3.45099 3.81377 3.56691 3.72957C3.68282 3.64538 3.77654 3.53428 3.84 3.40583L4.80208 1.45625Z"
              :fill="item.star == 0 ? '#9DA2AD' : '#FF6900'" :stroke="item.star == 0 ? '#9DA2AD' : '#FF6900'"
              stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </g>
          <defs>
            <clipPath id="clip0_10262_280">
              <rect width="10" height="10" fill="white" transform="translate(0 0.5)" />
            </clipPath>
          </defs>
        </svg>
        <span class="rank">{{ item.star }}</span>
        <span class="type" v-if="!isIndex">{{ item.type }}</span>
      </div>
    </div>
  </a>
</template>
<script setup>
const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  isIndex: {
    type: Boolean,
    default: false
  }
})
</script>
<style scoped lang="less">
.info a.name:hover {
  color: #775CE1 !important;
  transition: color 0.3s ease;
}

.content {
  cursor: pointer;
  display: flex;
  width: 8.87rem;
  height: 12.87rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  flex: 1 0 0;
  background: #FFF;
  /* Card Shadow */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  .img {
    position: relative;
    width: 100%;
    height: 8.87rem;

    .bac {
      position: absolute;
      inset: 0px;
      --transform-scale: scale(1.5);
      background-blend-mode: luminosity, overlay, normal;
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 50% 80px;
      --filter-params: blur(50px) saturate(4) contrast(100%);
      filter: blur(calc(100px / 2)) saturate(4) contrast(80%);
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
    }
  }

  .icon {
    position: absolute;
    left: 20px;
  }

  .info {
    width: 138px;
    height: 68px;
    padding: 0 12px;

    .name {
      display: block;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--Text-Title, #505662);
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
      padding: 10px 0;
      /* 142.857% */
    }

    .dec {
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
      gap: 4px;

      /* 添加间距 */
      .rank {
        color: var(--Orange-500, #FF6900);
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        /* 100% */
      }

      .type {
        color: var(--Text-Placeholder, #9DA2AD);
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 12px;
        /* 100% */
      }
    }
  }
}
</style>